@import "./modules/sharedConstants.scss";
@import "./modules/reset.scss";
@import "./modules/fonts.scss";
@import "./modules/animations.scss";
@import "./modules/classes/index.scss";

body {

    padding: $SHARED_MARGIN;
    width: 100vw;
    height: 100vh;
    min-width: 600px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    #controls {

        display: block;
        margin-bottom: $SHARED_MARGIN - $SHARED_CONTROL_BUTTON_PADDING * 2;
        font-size: 0;

        #group {

            display: flex;
            flex-direction: row;
            margin-right: -($SHARED_CONTROL_BUTTON_PADDING + $SHARED_CONTROL_BUTTON_PADDING);

            input {

                &:not(:first-child) {

                    margin-left: $SHARED_MARGIN / 2 - $SHARED_CONTROL_BUTTON_PADDING;
                }
            }

            #error {

                flex-grow: 1;
                color: #FF4444;
                font-family: "Roboto Mono Medium", monospace;
                font-size: 12px;
                line-height: 12px;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            #layoutVertical {

                transform: rotate(-90deg);
            }
        }
    }

    #content {

        $CONTENT_DROP_SHADOW: drop-shadow(0 0 2px #000000);
        $CONTENT_MIN_SIZE: 160px;
        $CODE_EDITOR_PADDING: 5px;
        $LINE_NUMBERS_WIDTH: 38px;

        flex: 1;
        display: flex;
        font-family: "Roboto Mono", monospace;
        font-size: 12px;

        #codeEditor {

            position: relative;
            font-size: inherit;
            flex: 1;
            filter: $CONTENT_DROP_SHADOW;
            min-width: $CONTENT_MIN_SIZE;
            min-height: $CONTENT_MIN_SIZE;
            z-index: 1;

            #textArea {

                position: absolute;
                top: 0;
                left: $LINE_NUMBERS_WIDTH;
                width: calc(100% - #{$LINE_NUMBERS_WIDTH});
                height: 100%;
                padding: $CODE_EDITOR_PADDING;
                resize: none;
                border: none;
                font-family: inherit;
                font-size: inherit;
                outline: none;
            }

            #lineNumbers {

                position: absolute;
                top: 0;
                left: 0;
                width: $LINE_NUMBERS_WIDTH;
                height: 100%;
                padding: $CODE_EDITOR_PADDING;
                text-align: right;
                border-right: none;
                pointer-events: none;
                white-space: pre;
                overflow: hidden;
                user-select: none;
            }
        }

        #dragBar {

            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            
            #dragIcon {
                
                text-align: center;
                pointer-events: none;
                width: $SHARED_MARGIN;
                height: $SHARED_MARGIN;
                padding-top: 3px;
            }

            #frameViewControls {

                position: absolute;
                margin: $SHARED_MARGIN / 2;
                z-index: 1;
                pointer-events: none;
                
                #controls {

                    display: flex;
                    pointer-events: auto;
                    cursor: auto;

                    input:not(:first-child) {

                        margin-left: $SHARED_MARGIN / 2 - $SHARED_CONTROL_BUTTON_PADDING;
                    }

                    #reflectHorizontal {

                        transform: rotate(-90deg);
                    }
                }

                #info {
                    
                    margin-top: -($SHARED_MARGIN / 2);
                    font-size: 0.8em;
                    div::before {

                        content: attr(data-info);
                    }
                }
            }
        }

        #frameView {

            position: relative;
            flex: 1;
            border: none;
            user-select: none;
            filter: $CONTENT_DROP_SHADOW;
            min-width: $CONTENT_MIN_SIZE;
            min-height: $CONTENT_MIN_SIZE;
        }
    }
}